-
-
Notifications
You must be signed in to change notification settings - Fork 209
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: create mobile version of repo table #409
Conversation
β Deploy Preview for design-insights ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
β Deploy Preview for oss-insights ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
β¦obile-repositories-tobile
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unfortunately, this is not the way to build this. Since tailwind is a mobile first framework, the media query behaviour you needed here was unfortunately already implemented: https://tailwindcss.com/docs/responsive-design
The correct way to do the above requirements is to start with the mobile container, and, if none of the classes or elements match we hide the element from {size}-above
- its desktop counterpart would get the equivalent of display none on lower-than-{size}
.
You will have to remove all the media query related code, the duplicated components and then start from the mobile version and go up.
Here's an example of me doing specifically this for the hot opensauced header: open-sauced/hot@804de3e#diff-bf23bc8e35322afeda9bd76b71764c861a4b727f530f9330ef727fcaa5248357
Alright Ted, I'll work on these changes in the morning ππ |
Alright Ted π |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PR Compliance Checks
Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.
Watched Files
This pull request modifies specific files that require careful review by the maintainers.
Files Matched
- npm-shrinkwrap.json
- package.json
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking better.
We should have min-width for each column so this doesn't happen:
If it's too much, the horizontal scroll will take care of that.
@bdougie should this be a separate issue?
We can apply the quick fix. Plan on cutting a release today. So if it gets fixed in the next few hours let's do it here, otherwise we can make a new issue. |
I'll apply this changes right away π |
π This PR is included in version 1.7.0-beta.7 π The release is available on GitHub release Your semantic-release bot π¦π |
## [1.7.0](v1.6.0...v1.7.0) (2022-09-23) ### π¨ Styles * added hover state style to footer links ([#420](#420)) ([3aa5f17](3aa5f17)) * change text font and icon size to xs(12px) ([#401](#401)) ([741288e](741288e)) * refactor show us button style to match design ([#419](#419)) ([b6c21b1](b6c21b1)), closes [#408](#408) ### π Bug Fixes * add tooltip message on information icon hover ([#421](#421)) ([12ff851](12ff851)), closes [#366](#366) * adds brandon to top5 ([8bb56cb](8bb56cb)) * correct beta branch checking beta gitsense api ([2c6f576](2c6f576)) * redirect from onboarding if already complete with custom hook ([#388](#388)) ([8600c76](8600c76)), closes [#387](#387) * update PR overview calculation to use active PRs in last 30 days / total PRs ([#423](#423)) ([05b48ff](05b48ff)), closes [#418](#418) ### π Features * add privacy and license terms ([#422](#422)) ([0dcc161](0dcc161)), closes [#377](#377) * connect repositories page to API data and pagination ([#405](#405)) ([634de8e](634de8e)), closes [#320](#320) [#384](#384) * create mobile version of repo table ([#409](#409)) ([9355968](9355968)) ### π§βπ» Code Refactoring * check avatarURL for orange avatar background and update pill colors ([#424](#424)) ([c821cd5](c821cd5)), closes [#414](#414) [#416](#416) * Polish the Dashboard to match designs ([#427](#427)) ([f919c27](f919c27)) * Polish the Reports Page to match the design ([#425](#425)) ([87a2bdc](87a2bdc)) * Update text styles on Scatter Chart card ([#429](#429)) ([ab24703](ab24703))
π This PR is included in version 1.7.0 π The release is available on GitHub release Your semantic-release bot π¦π |
## [1.7.0-beta.7](open-sauced/app@v1.7.0-beta.6...v1.7.0-beta.7) (2022-09-23) ### π Features * create mobile version of repo table ([#409](open-sauced/app#409)) ([9355968](open-sauced/app@9355968)) ### π§βπ» Code Refactoring * Update text styles on Scatter Chart card ([#429](open-sauced/app#429)) ([ab24703](open-sauced/app@ab24703))
## [1.7.0](open-sauced/app@v1.6.0...v1.7.0) (2022-09-23) ### π¨ Styles * added hover state style to footer links ([#420](open-sauced/app#420)) ([3aa5f17](open-sauced/app@3aa5f17)) * change text font and icon size to xs(12px) ([#401](open-sauced/app#401)) ([741288e](open-sauced/app@741288e)) * refactor show us button style to match design ([#419](open-sauced/app#419)) ([b6c21b1](open-sauced/app@b6c21b1)), closes [#408](open-sauced/app#408) ### π Bug Fixes * add tooltip message on information icon hover ([#421](open-sauced/app#421)) ([12ff851](open-sauced/app@12ff851)), closes [#366](open-sauced/app#366) * adds brandon to top5 ([8bb56cb](open-sauced/app@8bb56cb)) * correct beta branch checking beta gitsense api ([2c6f576](open-sauced/app@2c6f576)) * redirect from onboarding if already complete with custom hook ([#388](open-sauced/app#388)) ([8600c76](open-sauced/app@8600c76)), closes [#387](open-sauced/app#387) * update PR overview calculation to use active PRs in last 30 days / total PRs ([#423](open-sauced/app#423)) ([05b48ff](open-sauced/app@05b48ff)), closes [#418](open-sauced/app#418) ### π Features * add privacy and license terms ([#422](open-sauced/app#422)) ([0dcc161](open-sauced/app@0dcc161)), closes [#377](open-sauced/app#377) * connect repositories page to API data and pagination ([#405](open-sauced/app#405)) ([634de8e](open-sauced/app@634de8e)), closes [#320](open-sauced/app#320) [#384](open-sauced/app#384) * create mobile version of repo table ([#409](open-sauced/app#409)) ([9355968](open-sauced/app@9355968)) ### π§βπ» Code Refactoring * check avatarURL for orange avatar background and update pill colors ([#424](open-sauced/app#424)) ([c821cd5](open-sauced/app@c821cd5)), closes [#414](open-sauced/app#414) [#416](open-sauced/app#416) * Polish the Dashboard to match designs ([#427](open-sauced/app#427)) ([f919c27](open-sauced/app@f919c27)) * Polish the Reports Page to match the design ([#425](open-sauced/app#425)) ([87a2bdc](open-sauced/app@87a2bdc)) * Update text styles on Scatter Chart card ([#429](open-sauced/app#429)) ([ab24703](open-sauced/app@ab24703))
What type of PR is this? (check all applicable)
Description
This PR adds a mobile version of the
RepositoriesTable
component.Details:
To achieve the expected result for this issue, I had to split the repo-row component into two (
repo-row-mobile
&repo-row-desktop
).Related Tickets & Documents
Fixes #410
Mobile & Desktop Screenshots/Recordings
Mobile
Opened table
Desktop
Tablet
Added tests?
Added to documentation?
[optional] Are there any post-deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
π₯΅π₯΅